<template>
  <div>
    <el-container>
      <el-main class="bg-whitesmoke">
        <el-row>
          <el-col :offset="4" :span="16">
            <el-card>
              <el-row justify="start">
                <el-col :span="12">
                  <h2>
                    <div align="left">{{ hotel_name }}</div>
                  </h2>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div align="left">{{ address }}</div>
                </el-col>
              </el-row>
              <el-row type="flex" align="middle">
                <el-col :span="12">
                  <div class="text-overflow">{{ description }}</div>
                </el-col>
                <el-col :span="2" :offset="6">
                  <div align="right">
                    <del>￥{{ 3 * price }}</del>
                  </div>
                </el-col>
                <el-col :span="2">
                  <h2>
                    <p class="price">￥{{ price }}起</p>
                  </h2>
                </el-col>
                <el-col :span="2">
                  <div>
                    <a href="#A1">
                      <div align="right">
                        <el-button type="primary">选择房间</el-button>
                      </div>
                    </a>
                  </div>
                </el-col>
              </el-row>
              <el-row type="flex" align="top" justify="start">
                <el-col :span="12">
                  <el-carousel :interval="3000" type="card" height="300px">
                    <el-carousel-item v-for="preview_url in preview_urls" :key="preview_url">
                      <el-image style="width: 500px; height: 300px" :src="preview_url" :fit="fill"></el-image>
                    </el-carousel-item>
                  </el-carousel>
                </el-col>
                <el-col :span="12">
                  <el-row type="flex" align="middle">
                    <el-col :span="10" :offset="2">
                      <h2>
                        <p class="rate">{{ rate }}分 {{ rateDescribe(rate) }}</p>
                      </h2>
                    </el-col>
                    <el-col :span="12">
                      <div align="left">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="房间很大，比较宽敞，干净敞亮，采光也不错，是家庭式套房，非常适合家庭出游，管家小张服务很好哟，出行也很方便"
                          placement="top-start"
                        >
                          <el-button>房间很大，比较宽敞，干净敞亮...</el-button>
                        </el-tooltip>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <div id="A1"></div>
        <!--点击上方选择房间按钮会下滑到这里-->
        <el-row>
          <el-col :offset="4" :span="16">
            <el-card :body-style="{ padding: '0px' }">
              <el-row type="flex" align="middle" v-for="room in rooms" :key="room">
                <el-col :span="3">
                  <el-image style="width: 100px; height: 100px" :src="room.previewUrl" :fit="fill"></el-image>
                  <h5>{{ room.type }}</h5>
                </el-col>
                <el-col :span="3">可住{{ room.capacity }}人</el-col>
                <el-col :span="3">{{ room.bedType }}</el-col>
                <el-col :span="9">
                  可吸烟
                  <br />30分钟内可免费取消
                </el-col>
                <el-col :span="3">
                  <h2>
                    <p class="roomPrice">￥{{ room.price }}</p>
                  </h2>
                </el-col>
                <el-col :span="3">
                  <el-button type="warning" @click="bookRoom(room.id)">预定</el-button>
                </el-col>
              </el-row>
            </el-card>
            <el-card>
              <el-row>
                <el-col :span="4">
                  <h2 align="start">点评</h2>
                  <h3 align="left">
                    <p class="comment">({{ comment_num }}真实住客点评)</p>
                  </h3>
                </el-col>
                <el-col :span="20">
                  <h1>
                    <p class="rate">
                      {{ rate }}分
                      <br />
                      {{ rateDescribe(rate) }}
                    </p>
                  </h1>
                </el-col>
              </el-row>
            </el-card>
            <el-card>
              <el-row v-for="comment in comments" :key="comment">
                <el-col :span="4">
                  <div align="left">{{ comment.nickName }}</div>
                </el-col>
                <el-col :span="4">
                  <h3>
                    <p class="rate">{{ comment.rate }}分 {{ rateDescribe(comment.rate) }}</p>
                  </h3>
                </el-col>
                <el-col :span="16">
                  <div align="left">{{ comment.message }}</div>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import axios from "axios";
export default {
  name: 'RoomList',
  data: function () {
    return {
      hotel_name: '初见时光服务式公寓(成都太古里店)',
      address: '中国，四川，成都，锦江区，下东大街喜年广场B座3209室',
      description: '公寓位于成都繁华核心地段，拥有成都名片之称的太古里区域，公寓房间可俯瞰太古里全景，下楼即可到太古里、春熙路步行街、IFS，步行5分钟即到合江亭兰桂坊、王府井、太平洋、群光百货等，地理位置优越，交通便捷，出行方便。公寓楼下可尝遍成都美食，陈赫的贤合庄火锅、黄晓明的烧江南、廖健的谭鸭血火锅、小龙坎火锅、大龙燚火锅、冒椒火辣串串等网红店，三圣街小吃一条街，各种网红奶茶店让您轻松玩遍成都，吃遍成都美食，您还可以告知我们美食需求，让我们为您提供地道的建议。公寓是一家以创意时尚西雅概念为主题、全方面贴心服务为经营理念的现代化高有服务式公寓，还配有24小时贴心管家将尽全力满足您的一切需求。公寓采用现代时尚轻奢风设计理念，专属服务，客房内全面覆盖高速WiFi，房间可俯瞰太古里全景，视野开阔，我们拥有高品质纯客房，房间面积达50平米，24小时不间断可持续热水可以洗去一天的疲惫，房间采用星级高端品牌床垫斯林百兰，只为能让你在旅途中轻松入睡，房间都配有高级且丰富的洗浴用品，洗衣机、迷你小冰箱，高清投影，电吹风等设配。以悠然之态，尊享悠然旅途，以时尚之容，彰显独特魅力。',
      rate: 4.5,
      comment_num: 263,
      price: 119,
      lng: 109,
      lat: 35,
      preview_urls: [
        'http://pix4.agoda.net/hotelimages/1297/0/bd87a86dccd8e39d308ef076bbcc4b23.jpg?s=312x',
        'http://pix3.agoda.net/hotelimages/129/1297/1297_18122813570070896489.jpg?s=312x',
        'http://pix4.agoda.net/hotelimages/129/1297/1297_17062019470053906921.jpg?s=312x',
        'http://pix1.agoda.net/hotelimages/129/1297/1297_17092809340056881861.jpg?s=312x',
        'http://pix2.agoda.net/hotelimages/129/1297/1297_17092809340056881862.jpg?s=312x'
      ],
      rooms: [{
        id: 1,
        hotelId: 1297,
        capacity: 2,
        price: 100,
        previewUrl: 'http://pix4.agoda.net/hotelimages/1297/0/bd87a86dccd8e39d308ef076bbcc4b23.jpg?s=312x',
        breakfast: 1,
        type: '双床房',
        bedType: '两张单人床'
      }, {
        id: 2,
        hotelId: 1297,
        capacity: 3,
        price: 150,
        previewUrl: 'http://pix3.agoda.net/hotelimages/129/1297/1297_18122813570070896489.jpg?s=312x',
        breakfast: 1,
        type: '大床房',
        bedType: '一张大床'
      }],
      comments: [{
        id: '1',
        nickName: '小明',
        avaratUrl: '',
        message: '互联网真的是太潮辣受窘飞机偶爱所谓窘境有佛缘过来看机票归功于分类，表空间iu个衣服哟管理会计管理了规格i路过i路u同样的覅u敷一敷哦与否灰灰哦会很艰苦虎骨酒恢复高考教育',
        date: '2022-02-27',
        rate: 5
      }, {
        id: '2',
        nickName: '小红',
        avaratUrl: '',
        message: '[流汗][黄豆]',
        date: '2022-03-04',
        rate: 4
      }]
    }
  },
  methods: {
    rateDescribe: function (rate) {
      if (rate >= 4.9) return '超级棒'
      else if (rate >= 4.8) return '棒'
      else if (rate >= 4.7) return '很好'
      else if (rate >= 4.6) return '好'
      else if (rate >= 4.5) return '不错'
      else return ''
    },
    bookRoom: function (id) {
      // 带着参数跳转到下订单页面
    },
    getHotelInfo: function (hotelId) {
      //获得酒店信息
      var self = this;
      axios({
        method: 'get',
        url: '/api/hotel/gethotel',
        params: {
          id: hotelId
        }
      }).then(function (res) {
        // console.log(res.data.data);
        var data=res.data.data;
        self.hotel_name=data.name;
        self.address=data.address;
        self.price=data.price;
        self.star=data.star;
        self.rate=data.rate;
      self.lat=data.lat;
      self.lng=data.lng;
      self.description=data.description;
      self.comment_num=data.commentNum;
      });
      
    },
    getHotelComments: function (hotelId) {
      // 获取酒店评论
      var self = this;
      axios({
        method: 'get',
        url: '/api/comment/get_hotel/',
        params: {
          id: hotelId
        }
      }).then(function (res) {
        // console.log(res.data.data);
        self.comments = res.data.data;
      });
    },
    searchHotelRooms: function (hotelId) {
      // 获取酒店房间
      var self = this;
      axios({
        method: 'get',
        url: '/api/hotel/search_room/',
        params: {
          id: hotelId
        }
      }).then(function (res) {
        // console.log(res.data.data);
        self.rooms = res.data.data;
      });
    }
  },
  async mounted() {
    axios.defaults.baseURL = "http:localhost:8080"
    this.getHotelInfo(1297);
    this.getHotelComments(1297);
    this.searchHotelRooms(1297);
  }
}
</script>

<style scoped>
p.price {
  color: #409eff;
  text-align: right;
}

p.comment {
  color: darkgray;
}

p.rate {
  color: #409eff;
  text-align: left;
}

p.roomPrice {
  color: #409eff;
}

.text-overflow {
  width: 31em;
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

.el-row {
  margin-button: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-whitesmoke {
  background: whitesmoke;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
